<template>
    <div id="musicSingle" class="md-scrollbar">
        <aplayer v-if="!!songList" :key="i" v-for="(item,i) in songList" autoplay :music="{
            title: item.title,
            author: item.author,
            url: 'http://www.egtch.com/t_works/Vuedata/I Am You.mp3',
            pic: item.pic_big,
            lrc: '[00:00.00]lrc here\n[00:01.00]aplayer'
        }">
</aplayer>
    </div>
</template>
<script>
import { mapActions, mapState } from "vuex";
import Aplayer from "vue-aplayer";
export default {
  name: "musicSingle",
  components: {
    Aplayer
  },
  computed: {
    ...mapState({
      songList: state => state.songList
    })
  },
  mounted() {
    this.getMusic();
  },
  methods: {
    ...mapActions({
      getMusic: "GET_MUSIC"
    })
  }
};
</script>
<style lang="less" scoped>
@media screen and (max-width: 414px) {
  .md-scrollbar {
    max-height: 620px;
    overflow: auto;
  }
}
@media screen and (max-width: 375px) {
  .md-scrollbar {
    max-height: 550px;
    overflow: auto;
  }
}
@media screen and (max-width: 320px) {
  .md-scrollbar {
    max-height: 452px;
    overflow: auto;
  }
}
</style>


